<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<script type="text/javascript">
		//字符串的遍历器接口
		for (let codePoint of 'foo') {
			console.log(codePoint)
		}
		// "f"
		// "o"
		// "o"

		//模板字符串 
		// 字符串中嵌入变量、方法、表达式,还可以嵌套
		let name = "Bob", time = "today";
		`Hello ${name ? `name` : ''}, how are you ${time}?`

		//标签模板 
		alert`hello`
		// 等同于
		alert(['hello'])


		字符串新增方法
		//String.fromCodePoint() 
		String.fromCodePoint(0x20BB7)
		// "𠮷"

		//String.raw()
		//ES6 还为原生的 String 对象，提供了一个raw()方法。
		//该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，
		//往往用于模板字符串的处理方法
		String.raw`Hi\n${2 + 3}!`
		// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"


		//codePointAt()
		let s = '𠮷a';
		s.codePointAt(0) // 134071
		s.codePointAt(1) // 57271


		includes()：返回布尔值，表示是否找到了参数字符串。
		startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
		endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
		let s = 'Hello world!';
		s.startsWith('Hello') // true
		s.endsWith('!') // true
		s.includes('o') // true
		这三个方法都支持第二个参数，表示开始搜索的位置。
		let s = 'Hello world!';
		s.startsWith('world', 6) // true
		s.endsWith('Hello', 5) // true
		s.includes('Hello', 6) // false


		//repeat() 
		//repeat方法返回一个新字符串，表示将原字符串重复n次
		'x'.repeat(3) // "xxx"
		'hello'.repeat(2) // "hellohello"
		'na'.repeat(0) // ""
		'na'.repeat(2.9) // "nana"
		'na'.repeat(Infinity)// RangeError
		'na'.repeat(-1)// RangeError
		'na'.repeat(NaN) // ""
		'na'.repeat(-0.9) // ""
		'na'.repeat('na') // ""
		'na'.repeat('3') // "nanana"


		//padStart()，padEnd() 
		//ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，
		//会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
		'x'.padStart(5, 'ab') // 'ababx'
		'x'.padStart(4, 'ab') // 'abax'
		'x'.padEnd(5, 'ab') // 'xabab'
		'x'.padEnd(4, 'ab') // 'xaba'
		//如果原字符串的长度，等于或大于最大长度，
		//则字符串补全不生效，返回原字符串。
		'xxx'.padStart(2, 'ab') // 'xxx'
		'xxx'.padEnd(2, 'ab') // 'xxx'
		//如果用来补全的字符串与原字符串，两者的长度之和
		//超过了最大长度，则会截去超出位数的补全字符串。
		'abc'.padStart(10, '0123456789')// '0123456abc'
		//如果省略第二个参数，默认使用空格补全长度。
		'x'.padStart(4) // '   x'
		'x'.padEnd(4) // 'x   '


		//trimStart()，trimEnd() 
		//trimLeft()是trimStart()的别名
		/*ES2019 对字符串实例新增了trimStart()和trimEnd()这
		两个方法。它们的行为与trim()一致，trimStart()消除
		字符串头部的空格，trimEnd()消除尾部的空格。它们返回
		的都是新字符串，不会修改原始字符串*/
		const s = '  abc  ';
		s.trim() // "abc"
		s.trimStart() // "abc  "
		s.trimEnd() // "  abc"


		//replaceAll()
		//ES2021 引入了replaceAll()方法，可以一次性替换所有匹配
		//String.prototype.replaceAll(searchValue, replacement)
		/*searchValue是搜索模式，可以是一个字符串，也可以是一
		个全局的正则表达式（带有g修饰符）,
		如果searchValue是一个不带有g修饰符的正则表达式，
		replaceAll()会报错。这一点跟replace()不同*/
		'aabbcc'.replaceAll('b', '_')// 'aa__cc'
		// 不报错
		'aabbcc'.replace(/b/, '_')
		// 报错
		'aabbcc'.replaceAll(/b/, '_')
		//	/b/不带有g修饰符，会导致replaceAll()报错

		// $& 表示匹配的字符串，即`b`本身
		// 所以返回结果与原字符串一致
		'abbc'.replaceAll('b', '$&')
		// 'abbc'

		// $` 表示匹配结果之前的字符串
		// 对于第一个`b`，$` 指代`a`
		// 对于第二个`b`，$` 指代`ab`
		'abbc'.replaceAll('b', '$`')
		// 'aaabc'

		// $' 表示匹配结果之后的字符串
		// 对于第一个`b`，$' 指代`bc`
		// 对于第二个`b`，$' 指代`c`
		'abbc'.replaceAll('b', `$'`)
		// 'abccc'

		// $1 表示正则表达式的第一个组匹配，指代`ab`
		// $2 表示正则表达式的第二个组匹配，指代`bc`
		'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
		// 'bcab'

		// $$ 指代 $
		'abc'.replaceAll('b', '$$')
		// 'a$c'


		//replaceAll()的第二个参数replacement除了为字符串，也可以
		//是一个函数，该函数的返回值将替换掉第一个参数searchValue匹配的文本。
		'aabbcc'.replaceAll('b', () => '_')// 'aa__cc'


	</script>
</body>

</html>